﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>宽屏变化</title>
    <link type="text/css" rel="stylesheet" href="css/skitter.styles.css" />
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.skitter.min.js"></script>
    <!-- Init Skitter -->
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('.box_skitter_large').skitter({
                theme: 'default',
                numbers_align: 'center',
                dots: true,
                animation: 'random',
                navigation: false,
                auto_play: false,
                label: false
            });
            $(".banner").skitter({/*常用配置*/
                theme: 'default',
                animation: 'random', /*36种效果，现为随机*/
                label: false,
                numbers_align: 'center',
                progressbar: false,
                dots: false, /*为flase是数字，true是圆点*/
                interval: 1000
            });
        });
    </script>
</head>
<body>
    <div style="width: 100%; overflow: hidden; height: 330px; position: relative; z-index: 0;">
        <div style="width: 1600px; height: 330px; position: relative; left: 50%;">
            <div style="position: relative; width: 1600px; height: 330px; z-index: 1; left: -50%;">
                <div class="border_box">
                    <div class="banner box_skitter">
                        <ul>
                            <li><a target="_blank" href="#">
                                <img src="images/banner01.jpg" /></a></li>
                            <li><a target="_blank" href="#">
                                <img src="images/banner02.jpg" /></a></li>
                            <li><a target="_blank" href="#">
                                <img src="images/banner03.jpg" /></a></li>
                            <li><a target="_blank" href="#">
                                <img src="images/banner04.jpg" /></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
